<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="${pageContext.request.contextPath}../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/pace.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}../../static/css/nanoscroller.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}../../static/css/metismenu.min.css">
    <link href="${pageContext.request.contextPath}../../static/css/c3.min.css" rel="stylesheet">
    <!-- dataTables -->
    <link href="${pageContext.request.contextPath}../../static/css/jquery.datatables.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}../../static/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css">
    <!--template css-->
    <link href="${pageContext.request.contextPath}../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}../../static/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>


<!--page header start-->
<div class="page-header">
    <div class="row">
        <div class="col-sm-6">
            <h4>销售数据面板</h4>
        </div>
        <div class="col-sm-6 text-right">
            <ol class="breadcrumb">
                <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                <li>销售管理</li>
                <li>销售数据</li>
            </ol>
        </div>
    </div>
</div>
<!--page header end-->


<!--start page content-->
<div class="row">
    <div class="col-lg-4 col-md-8">
        <div class="widget white-bg  padding-0">
            <div class="row row-table">
                <div class="col-xs-4 text-center pv-15 bg-primary">
                    <em class="fa fa-shopping-cart fa-3x"></em>
                </div>
                <div class="col-xs-8 pv-15 text-center">
                    <h2 class="mv-0 font-400">2300</h2>
                    <div class="text-uppercase">订单量</div>
                </div>
            </div>
        </div><!--end widget-->
    </div><!--end col-->

    <div class="col-lg-4 col-md-8">
        <div class="widget white-bg  padding-0">
            <div class="row row-table">
                <div class="col-xs-4 text-center pv-15 bg-success">
                    <em class="fa fa-usd fa-3x"></em>
                </div>
                <div class="col-xs-8 pv-15 text-center">
                    <h2 class="mv-0 font-400">4395</h2>
                    <div class="text-uppercase">销售额</div>
                </div>
            </div>
        </div><!--end widget-->
    </div><!--end col-->
    <div class="col-lg-4 col-md-8">
        <div class="widget white-bg  padding-0">
            <div class="row row-table">
                <div class="col-xs-4 text-center pv-15 bg-indigo">
                    <em class="icon-bar-chart fa-3x"></em>
                </div>
                <div class="col-xs-8 pv-15 text-center">
                    <h2 class="mv-0 font-400">459</h2>
                    <div class="text-uppercase">物品销售</div>
                </div>
            </div>
        </div><!--end widget-->
    </div><!--end col-->
</div>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="btn-group">
                    </div>
                </div>
                每周销售额
                <small class="text-muted">Last week</small>
            </div>
            <div class="panel-body">
                <div>
                    <div class="morris-chart-content">
                        <div id="lineChart" style="width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">

    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                产品概述
                <small class="text-muted"> 每月前五</small>
            </div>
            <div class="panel-body pv-0">
                <div class="tabs">
                    <div class="tab-content padding-0">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <div id="table-container" class="table-responsive">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--col-md-12-->
</div>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">

                <table id="datatable1" class="table table-striped dt-responsive nowrap table-hover">
                    <thead>
                    <tr id="t1">
                        <th style="width:80px">
                            <strong>订单id</strong>
                        </th>
                        <th>
                            <strong>订单编号</strong>
                        </th>
                        <th>
                            <strong>客户名称</strong>
                        </th>
                        <th>
                            <strong>客户联系方式</strong>
                        </th>
                        <th>
                            <strong>总金额</strong>
                        </th>
                        <th>
                            <strong>接单时间</strong>
                        </th>
                        <th>
                            <strong>订单状态</strong>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}../../static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/pace.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jasny-bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.nanoscroller.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/metismenu.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/float-custom.js"></script>
<!--page script-->
<script src="${pageContext.request.contextPath}../../static/js/d3.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/c3.min.js"></script>
<!-- Datatables-->
<script src="${pageContext.request.contextPath}../../static/js/jquery.datatables.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/datatables.responsive.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/e-commerce-dashboard-custom.js"></script>
</body>
<script>
    $(function () {
        init();
    })

    function init() {

        $.ajax({
            type: "GET",
            url: "sales/getTopFiveSaleProduct",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                console.log(data.data);
                getTopFiveSaleProduct(data.data);
            }
        })
    }

    function getTopFiveSaleProduct(data) {
        console.log(data);
        // 创建表格元素
        const tableEl = $("<table>").addClass("table table-striped table-hover margin-b-0");

        // 创建表头行
        const theadEl = $("<thead>");
        const theadRowEl = $("<tr>");

        const emptyHeaderCellEl = $("<th>");
        theadRowEl.append(emptyHeaderCellEl);

        theadEl.append(theadRowEl);
        tableEl.append(theadEl);

        // 创建表格内容行
        const tbodyEl = $("<tbody>");

        $.each(data, function (index, rowData) {
            const tbodyRowEl = $("<tr>");

            const emptyCellEl = $("<td>");
            const cell1El = $("<td>").html(`<a href="">${rowData.productName}</a>`);
            const cell2El = $("<td>").text(rowData.productQuantity);
            tbodyRowEl.append(emptyCellEl);
            tbodyRowEl.append(cell1El);
            tbodyRowEl.append(cell2El);

            tbodyEl.append(tbodyRowEl);
        });

        tableEl.append(tbodyEl);

        // 将表格元素添加到页面中
        const tableContainer = $("#table-container");
        tableContainer.append(tableEl);
    }        // 表格数据
</script>
<script>

    let dataTable = $('#datatable1').DataTable({
        // 设置列定义
        columns: [
            {data: 'salesOrderId'},
            {data: 'salesOrderNo'},
            {data: 'customName'},
            {data: 'customPhone'},
            {data: 'totalPrice'},
            {data: 'salesOrderTime'},
            {data: 'salesOrderStatus'}
        ]
    });
    getSalesDetails();

    function getSalesDetails() {

        $.ajax({
            "url": "sales/getSalesDetails",                      // 要提交的URL路径
            "type": "get",                     // 发送请求的方式
            "data": {},                      // 要发送到服务器的数据
            "dataType": "json",                   // 期望接受的数据格式
            "success": function (result) {  // 请求成功后要执行的代码
                if (result.code === 404) {
                    alert("没销售订单")
                } else {


                    result = result.data
                    console.log(result)
                    var Details = ''; // 存储拼接的HTML字符串

                    for (let index in result) {
                        var salesOrderStatus = result[index].salesOrderStatus;
                        var statusText = '';
                        var stateClass = '';

                        // 根据销售订单状态判断填入的数据
                        if (salesOrderStatus === '1') {
                            statusText = '等待审核';
                            stateClass = "label label-info"
                        } else if (salesOrderStatus === '2') {
                            statusText = '付款成功';
                            stateClass = "label label-success"
                        } else if (salesOrderStatus === '3') {

                            stateClass = "label label-default"
                            statusText = '订单取消';
                        } else if (salesOrderStatus === '4') {
                            stateClass = "label label-indigo"
                            statusText = '全额退款';
                        } else if (salesOrderStatus === '5') {
                            stateClass = "label label-danger"
                            statusText = '部分退款';

                        } else if (salesOrderStatus === '6') {
                            stateClass = "label label-warning"
                            statusText = '代付尾款';
                        } else {
                            stateClass = "label label-default"
                            statusText = '未知状态';
                        }
                        Details += `
    <tr>
    <td class="sorting_1" tabindex="0" >${result[index].salesOrderId}</td>
    <td>${result[index].salesOrderNo}</td>
    <td>${result[index].customName}</td>
    <td>${result[index].customPhone}</td>
    <td>${result[index].totalPrice}</td>
    <td>${result[index].salesOrderTime}</td>
    <td>
    <span class="${stateClass}" style="">
    ${statusText}
    </span>
    </td>
    </tr>`;
                        // 拼接HTML字符串
                    }
                    console.log(Details)
                    if (dataTable) {
                        dataTable.destroy(); // 销毁旧的DataTable实例
                    }
                    dataTable.rows.add(result).draw();
                    $('#datatable1 tbody').html(Details); // 更新表格数据
                    dataTable = $('#datatable1').DataTable({
                        "order": [[0, 'asc']], // 默认按第一列升序排序
                        "paging": true // 启用分页功能，根据需求设置其他分页选项
                    });
                }
            }, "error": function () {
                alert("数据响应时间过长！请重新加载")
            }
        });
    }
</script>
</html>